<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Oren Video Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="icon" href="images/Favicon.png">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/flatpickr.min.css">
	<link rel="stylesheet" type="text/css" href="css/fontello.css">
	<link rel="stylesheet" type="text/css" href="css/fontello-codes.css">
	<link rel="stylesheet" type="text/css" href="css/thumbs-embedded.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/responsive.css">
	<link rel="stylesheet" type="text/css" href="css/color.css">
	<link rel="stylesheet" type="text/css" href="css/custom-improvements.css">
	<link rel="stylesheet" type="text/css" href="css/font-improvements.css">
	<link rel="stylesheet" type="text/css" href="css/animations.css">
	<style>
		[v-cloak] {
			display: none;
		}
	</style>

</head>

<body>
	<div id="myapp">
		<div class="wrapper hp_1">

			<header>
				<div class="top_bar">
					<div class="container">
						<div class="top_header_content">
							<div class="menu_logo">
							</div><!--menu_logo end-->
							<div class="search_form">
								<form @submit.prevent="searchVideos">
									<input type="text" v-model="searchKeyword" placeholder="Search Videos">
									<button type="submit">
										<i class="icon-search"></i>
									</button>
								</form>
							</div><!--search_form end-->
							<ul class="controls-lv">
								<li v-if="!user.isLoggedIn">
									<a href="login.html" class="btn btn-sm btn-primary">登录</a>
								</li>
								<li v-if="!user.isLoggedIn">
									<a href="register.html" class="btn btn-sm btn-success">注册</a>
								</li>
								<li v-if="user.isLoggedIn">
									<span>欢迎, {{ user.info.username }}</span>
								</li>
								<li v-if="user.isLoggedIn">
									<button @click="logout" class="btn btn-sm btn-outline-danger">登出</button>
								</li>
							</ul><!--controls-lv end-->
							<div class="clearfix"></div>
						</div><!--top_header_content end-->
					</div>
				</div><!--header_content end-->
				<div class="btm_bar">
					<div class="container">
						<div class="btm_bar_content">
							<nav>
								<ul>
								</ul>
							</nav><!--navigation end-->
							<ul class="shr_links">
							</ul><!--shr_links end-->
							<ul class="vid_thums">
								<li>
									<a class="active" href="#" title=""><i class="icon-grid"></i></a>
								</li>
								<li>
								</li>
							</ul><!--vid_status end-->

						</div><!--btm_bar_content end-->
					</div>
				</div><!--btm_bar end-->
			</header><!--header end-->

			<div class="side_menu">
				<div class="form_dvv">
					<a href="#" title="" class="login_form_show">Sign in</a>
				</div>
				<div class="sd_menu">
					<ul class="mm_menu">
						<li>
							<span>
								<i class="icon-home"></i>
							</span>
							<a href="#" title="">Home</a>
						</li>
						<li>
							<span>
								<i class="icon-fire"></i>
							</span>
							<a href="#" title="">Trending</a>
						</li>
						<li>
							<span>
								<i class="icon-subscriptions"></i>
							</span>
							<a href="#" title="">Subscriptions</a>
						</li>
					</ul>
				</div><!--sd_menu end-->
				<div class="sd_menu">
					<h3>Library</h3>
					<ul class="mm_menu">
						<li>
							<span>
								<i class="icon-history"></i>
							</span>
							<a href="#" title="">History</a>
						</li>
						<li>
							<span>
								<i class="icon-watch_later"></i>
							</span>
							<a href="#" title="">Watch Later</a>
						</li>
						<li>
							<span>
								<i class="icon-purchased"></i>
							</span>
							<a href="#" title="">Purchases</a>
						</li>
						<li>
							<span>
								<i class="icon-like"></i>
							</span>
							<a href="#" title="">Liked Videos</a>
						</li>
						<li>
							<span>
								<i class="icon-play_list"></i>
							</span>
							<a href="#" title="">Playlist</a>
						</li>
					</ul>
				</div><!--sd_menu end-->
				<div class="sd_menu subs_lst">
					<h3>Subscriptions</h3>
					<ul class="mm_menu">
						<li>
							<span class="usr_name">
								<img src="images/resources/th1.png" alt="">
							</span>
							<a href="#" title="">Dr Disrespect</a>
							<small>3</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/th2.png" alt="">
							</span>
							<a href="#" title="">ASMR</a>
							<small>6</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/th3.png" alt="">
							</span>
							<a href="#" title="">Rivvrs</a>
							<small>2</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/th4.png" alt="">
							</span>
							<a href="#" title="">The Verge</a>
							<small>11</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/th5.png" alt="">
							</span>
							<a href="#" title="">Seeker</a>
							<small>3</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/sn.png" alt="">
							</span>
							<a href="#" title="">Music</a>
							<small>20</small>
						</li>
					</ul>
					<a href="#" title="" class="more-ch"><i class="icon-arrow_below"></i> Show 14 more</a>
				</div><!--sd_menu end-->
				<div class="sd_menu">
					<ul class="mm_menu">
						<li>
							<span>
								<i class="icon-settings"></i>
							</span>
							<a href="#" title="">Settings</a>
						</li>
						<li>
							<span>
								<i class="icon-flag"></i>
							</span>
							<a href="#" title="">Report history</a>
						</li>
						<li>
							<span>
								<i class="icon-logout"></i>
							</span>
							<a href="#" title="">Sign out</a>
						</li>
					</ul>
				</div><!--sd_menu end-->
				<div class="sd_menu m_linkz">
					<ul class="mm_menu">
						<li><a href="#">About</a></li>
						<li><a href="#">Community Rules </a></li>
						<li><a href="#">Privacy</a></li>
						<li><a href="#">Terms</a></li>
						<li><a href="#">Blogs</a></li>
						<li><a href="#">Contracts </a></li>
						<li><a href="#">Donate</a></li>
						<li><a href="#">FAQ</a></li>
					</ul>
					<span>azyrusthemes</span>
				</div><!--sd_menu end-->
				<div class="sd_menu bb-0">
					<ul class="social_links">
						<li>
							<a href="#" title="">
								<i class="icon-facebook-official"></i>
							</a>
						</li>
						<li>
							<a href="#" title="">
								<i class="icon-twitter"></i>
							</a>
						</li>
						<li>
							<a href="#" title="">
								<i class="icon-instagram"></i>
							</a>
						</li>
					</ul><!--social_links end-->
				</div><!--sd_menu end-->
				<div class="dd_menu"></div>
			</div><!--side_menu end-->
			<section class="banner-section">
				<div class="container">
					<div class="banner-text">
						<h2 class="gradient-text">与朋友一起观看、分享和上传视频</h2>
						<p class="banner-subtitle">探索精彩的视频世界，与全球用户分享您的创意</p>
						<button class="btn btn-primary hover-lift" data-toggle="modal" data-target="#createVideoModal">
							<i class="icon-add"></i>
							创建新视频
						</button>
					</div><!--banner-text end-->
					<h3 class="headline animate-fade-in" v-cloak>今日推荐视频 by <a href="#" title="" class="text-gradient">{{author}}</a></h3>
				</div>
			</section><!--banner-section end-->
			<section class="vds-main">
				<div class="vidz-row">
					<div class="container">
						<div class="vidz_sec">
											<div class="d-flex justify-content-between align-items-center mb-3">
					<h3>视频列表</h3>
					<div class="d-flex align-items-center">
						<!-- 用户信息显示 -->
						<div v-if="user.isLoggedIn" class="user-info mr-3">
							<span class="text-muted">欢迎, </span>
							<strong>{{ user.info.username }}</strong>
							<span class="text-muted"> ({{ user.info.email }})</span>
							<button class="btn btn-sm btn-outline-secondary ml-2" @click="logout">
								<i class="icon-logout"></i> 登出
							</button>
						</div>
						<div v-else class="auth-links mr-3">
							<a href="login.html" class="btn btn-sm btn-outline-primary mr-1">登录</a>
							<a href="register.html" class="btn btn-sm btn-outline-success">注册</a>
						</div>
						
						<button v-if="user.isLoggedIn" class="btn btn-primary" data-toggle="modal" data-target="#createVideoModal">
							<i class="icon-plus"></i> 上传视频
						</button>
					</div>
				</div>
							<div class="vidz_list">
								<div class="row">
									<div class="col-lg-3 col-md-6 col-sm-6 col-6 full_wdth" v-for="video in videos"
										:key="video.id">
										<div class="videoo">
											<div class="vid_thumbainl">
												<a :href="'video.html?id=' + video.id" :title="video.name">
													<img :src="video.image" :alt="video.name">
													<span class="vid-time">{{ video.duration || '10:21' }}</span>
													<span class="watch_later">
														<i class="icon-watch_later_fill"></i>
													</span>
												</a>
											</div>
											<div class="video_info">
												<h3><a :href="'video.html?id=' + video.id" :title="video.name">{{
														video.name || '默认标题' }}</a></h3>
												<h4>
													<a href="Single_Channel_Home.html">{{ video.author || 'newfox media'
														}}</a>
													<span class="verify_ic"><i class="icon-tick"></i></span>
												</h4>
												<span>{{ video.views || '686K' }} views <small class="posted_dt">{{
														video.time || '1 week ago' }}</small></span>
												<div class="video-stats">
													<span class="like-count">
														<i class="icon-like"></i> {{ video.like_count || 0 }} 点赞
													</span>
												</div>
											</div>
										</div><!--videoo end-->
									</div>
								</div>
							</div><!--vidz_list end-->
						</div><!--vidz_videos end-->
					</div>
				</div><!--vidz-row end-->
			</section><!--vds-main end-->
		</div><!--wrapper end-->
		
		<div class="modal fade" id="createVideoModal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">上传新视频</h5>
						<button type="button" class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<form id="videoUploadForm">
							<div class="form-group">
								<label>视频标题</label>
								<input type="text" class="form-control" v-model="newVideo.title" required>
							</div>
							<div class="form-group">
								<label>视频描述</label>
								<textarea class="form-control" v-model="newVideo.description"></textarea>
							</div>
							<div class="form-group">
								<label>缩略图</label>
								<input type="file" class="form-control" @change="handleThumbnailUpload"
									accept="image/*">
							</div>
							<div class="form-group">
								<label>视频文件</label>
								<input type="file" class="form-control" @change="handleVideoUpload" accept="video/*"
									required>
							</div>

							<!-- 上传进度条 -->
							<div class="progress" v-if="isUploading">
								<div class="progress-bar" role="progressbar" :style="{width: uploadProgress + '%'}"
									:aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100">
									{{ uploadProgress }}%
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" @click="submitVideo" :disabled="isUploading">
							<span v-if="!isUploading">上传</span>
							<span v-else>上传中...</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/popper.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/flatpickr.js"></script>
	<script src="js/script.js"></script>
	<script src="js/auth.js"></script>
<script>
	let app = new Vue({
		el: "#myapp",
		data: {
			author: "Xiaoyu",
			videos: [],
			newVideo: {
				title: '',
				description: '',
				videoFile: null,
				thumbnailFile: null
			},
			uploadProgress: 0,
			isUploading: false,
			searchKeyword: '',
			user: {
				isLoggedIn: false,
				info: {}
			}
		},
		methods: {
			// 检查用户登录状态
			checkUserStatus: function() {
				this.user.isLoggedIn = authManager.isLoggedIn();
				if (this.user.isLoggedIn) {
					this.user.info = authManager.getUserInfo();
				}
			},

			// 用户登出
			logout: function() {
				authManager.authenticatedRequest({
					url: "/user/logout",
					type: "POST",
					context: this,
					success: function() {
						authManager.logout();
						this.user.isLoggedIn = false;
						this.user.info = {};
						alert('登出成功');
						window.location.reload();
					},
					error: function() {
						// 即使登出失败，也清除本地状态
						authManager.logout();
						this.user.isLoggedIn = false;
						this.user.info = {};
						window.location.reload();
					}
				});
			},

			// 搜索视频
			searchVideos: function() {
				const url = this.searchKeyword ? `/video?search=${encodeURIComponent(this.searchKeyword)}` : '/video';
				$.ajax({
					url: url,
					type: "get",
					context: this,
					dataType: "json",
					success: function (result, status, xhr) {
						console.log("搜索结果:", result);
						this.videos = result;
					},
					error: function (xhr, status, error) {
						console.error("搜索失败:", error);
						alert("搜索失败，请检查网络或后端服务！");
					}
				});
			},

			get_allvideos: function () {
				$.ajax({
					url: "/video",
					type: "get",
					context: this,
					dataType: "json",
					success: function (result, status, xhr) {
						console.log("原始返回数据:", result);
						this.videos = result;
						console.log("处理后 videos 数据:", this.videos);
					},
					error: function (xhr, status, error) {
						console.error("请求失败:", error);
						alert("加载视频失败，请检查网络或后端服务！");
					}
				});
			},

			// 处理缩略图上传
			handleThumbnailUpload: function (event) {
				this.newVideo.thumbnailFile = event.target.files[0];
			},

			// 处理视频文件上传
			handleVideoUpload: function (event) {
				this.newVideo.videoFile = event.target.files[0];
			},

			// 提交视频表单
			submitVideo: function () {
				event.preventDefault();

				console.log("提交视频数据:", this.newVideo);
				console.log("视频文件:", this.newVideo.videoFile);

				// 验证表单
				if (!this.newVideo.title || !this.newVideo.videoFile) {
					alert("请填写视频标题并选择视频文件");
					return;
				}

				this.isUploading = true;

				const formData = new FormData();
				// 关键修改：直接使用后端期望的字段名
				formData.append('name', this.newVideo.title);
				formData.append('info', this.newVideo.description || '');
				formData.append('video', this.newVideo.videoFile);
				if (this.newVideo.thumbnailFile) {
					formData.append('image', this.newVideo.thumbnailFile);
				}

				// 调试输出
				console.log("实际发送的字段:");
				for (let [key, val] of formData.entries()) {
					console.log(key, val instanceof File ? `[File] ${val.name}` : val);
				}

				// 发送AJAX请求
				$.ajax({
					url: "/video",  // 你的后端接口地址
					type: "POST",
					data: formData,
					processData: false,  // 必须设置为false
					contentType: false,  // 必须设置为false
					xhr: () => {
						const xhr = new window.XMLHttpRequest();
						xhr.upload.addEventListener("progress", (evt) => {
							if (evt.lengthComputable) {
								this.uploadProgress = Math.round((evt.loaded / evt.total) * 100);
							}
						}, false);
						return xhr;
					},
					context: this,
					success: function (response) {
						alert("视频上传成功！");
						this.get_allvideos(); // 刷新视频列表
						this.resetForm();
						$('#createVideoModal').modal('hide');
					},
					error: function (xhr, status, error) {
						console.error("上传失败:", error);
						alert("视频上传失败: " + (xhr.responseJSON?.message || error));
					},
					complete: function () {
						this.isUploading = false;
						this.uploadProgress = 0;
					}
				});
			},

			// 重置表单
			resetForm: function () {
				this.newVideo = {
					title: '',
					description: '',
					videoFile: null,
					thumbnailFile: null
				};
				// 重置文件输入
				$('#videoUploadForm input[type="file"]').val('');
			}
		},
		mounted: function () {
			// 初始化认证状态
			authManager.initPage();
			this.checkUserStatus();
			this.get_allvideos();

			// 监听模态框关闭事件
			$('#createVideoModal').on('hidden.bs.modal', () => {
				this.resetForm();
			});
		}

	});
</script>

</html>